<template>
	<div class="device-main">
		<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
			<el-menu-item index="addPoint">设备添加点位</el-menu-item>
			<el-menu-item index="addEdge">设备添加路径</el-menu-item>
			<el-menu-item index="kaishidiao">调度页面</el-menu-item>
		</el-menu>
		<div class="container-main">
			<router-view>
			</router-view>
		</div>
	</div>

</template>

<script setup lim>
import {
	useRouter,
	useRoute
} from 'vue-router';
import {computed} from "vue";
const router = useRouter();
const route = useRoute();

const activeIndex = computed(()=>{
	return route.name
})

const handleSelect = (e)=>{
	router.push({
		name:e
	})
}

</script>

<style scoped>
.left-menu {
	background-color: #e0e0e0;
	padding: 20px;
	display: flex;
	flex-direction: row;
	/* 设置为行布局 */
	flex-wrap: wrap;
	/* 允许换行 */
	gap: 20px;
}

button {
	/* 这里不需要 inline-block，flex 布局下不需要这个属性 */
	height: 100px;
	width: 150px;
	padding: 10px 20px;
	background-color: #007BFF;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

button:hover {
	background-color: #0056b3;
}
</style>